<!--  -->
<template>
  <div class="login">
    <div class="clear-fix title">
      <router-link :to="{name:'register',query:{pid:$route.query.pid,aid:$route.query.aid}}" replace>
        <span class="float-r f-18">注册</span>
      </router-link>
    </div>
   
    <div class="logo-container flex justify-center aligin-center">
      <span class="logo"></span>
      <span>融媒优品</span>
    </div>
    <cube-input class="mobile" v-model="mobile" placeholder="手机号" clearable></cube-input>
    <cube-validator ref="mobile" v-model="valid[0]" :model="mobile" :rules="rules"></cube-validator>
    <cube-input
      class="password"
      v-model="password"
      placeholder="密码"
      type="password"
      clearable
      :eye="{open:false}"
    ></cube-input>
    <cube-validator ref="password" v-model="valid[1]" :model="password" :rules="passwordRules"></cube-validator>
    <div class="other f-14 flex justify-between">
      <span @click="quickLogin">手机快捷登录</span>
      <router-link to="forget">忘记密码</router-link>
    </div>
    <button class="z-btn color-white f-16" :class="ruleChecked?'':'bg-gray'" @click="submit">登录</button>
    <div class="wx-btn color-white f-16 flex justify-center aligin-center" v-if="isWX" :class="ruleChecked?'':'bg-gray'" @click="wxLogin"> <span class="wx-icon"></span> <span>微信一键登录</span>  <span class="recommand flex justify-center aligin-center">推荐</span> </div>
     
    <div class="rule flex justify-center">
      <van-checkbox
        ref="ruleBox"
        v-model="ruleChecked"
        shape="square"
        icon-size="15"
        checked-color="#E83038"
      >
        <span class="f-13" @click="ruleChange">{{ruleChecked?'我已阅读并同意':'登录即同意'}}</span>
        <router-link
          tag="span"
          :to="{name:'activities',params:{id:5}}"
          class="rule-content f-13"
        >融媒优品服务与隐私协议</router-link>
      </van-checkbox>
    </div>
  </div>
</template>

<script>
import { login, weLogin } from "../api/api";
import { Toast } from "vant";
import mixin from "../mixin/md5"
export default {
  mixins:[mixin],
  components: {},
  data() {
    return {
      ruleChecked: false,
      mobile: "",
      password: "",
      valid: [undefined, undefined],
      rules: {
        required: true,
        type: "tel"
      },
      passwordRules: {
        required: true
      }
    };
  },
  computed: {
    isWX(){
      var ua = navigator.userAgent.toLowerCase();
      return (ua.indexOf("micromessenger") != -1)?true:false
    }
  },
  watch: {},
  methods: {
    ruleChange() {
      this.$refs.ruleBox.toggle(!this.ruleChecked);
    },
    quickLogin() {
      if (!this.ruleChecked) {
        Toast("请阅读并同意 <<融媒优品服务与隐私协议>>");
        return;
      }
      this.$router.push({
        name: "quickLogin",
        query: { pid: this.$route.query.pid,aid:this.$route.query.aid }
      });
    },
    // 微信登入
    wxLogin() {
      if (!this.ruleChecked) {
        Toast("请阅读并同意 <<融媒优品服务与隐私协议>>");
        return;
      }
      let params = {};
      if (parseInt(this.$route.query.pid)) {
        params = Object.assign({}, params, { pid: this.$route.query.pid });
      }
      if(this.$route.query.aid){
            params = Object.assign({}, params, { aid: this.$route.query.aid });
      }
      weLogin(params).then(res => {
        window.location.replace(res.data.result);
      });
    },
    //提交
    submit() {
      if (!this.ruleChecked) {
        Toast("请阅读并同意 <<融媒优品服务与隐私协议>>");
        return;
      }
      const p1 = this.$refs.mobile.validate();
      const p2 = this.$refs.password.validate();
      Promise.all([p1, p2]).then(() => {
        if (this.valid.every(item => item)) {
          let params = {
            mobile: this.mobile,
            password: this.MD5(this.MD5(this.password)),
            device_code: 1
          };
          if (parseInt(this.$route.query.pid)) {
            params = Object.assign({}, params, { pid: this.$route.query.pid });
          }

          login(params).then(res => {
            if (res.data.result.token) {
              this.$store.commit("saveToken", res.data.result.token);
              if (parseInt(this.$route.query.pid)) {
                this.$router.back();
              } else {
                this.$router.replace({ path: "/index/home" });
              }
            }
          });
        }
      });
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin.less"); //引入公共css类
.mt-34 {
  margin-top: 34px;
}
//input激活
.login /deep/ .cube-input_active {
  box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
}
.login /deep/ .cube-input:after {
  border: none;
}
.login /deep/ .cube-validator-msg-def {
  margin-left: 41px;
}
.login {
  height: 100%;
  .logo-container{
    margin-top: 40px;
    font-size: 24px;
  }
  .logo{
    margin-right: 11px;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: url("../assets/imgs/logo@2x.png");
    background-size: 100% 100%;
  }
  .title {
    padding: 15px 33px;
  }
  .welcome {
    margin-left: 41px;
    font-size: 24px;
    line-height: 42px;
  }
  .line {
    margin-left: 64px;
    width: 30px;
    height: 3px;
    background: #ea373f;
  }
  .mobile {
    margin: 40px 41px 0 41px;
    height: 44px;
    font-size: 14px;
  }
  .password {
    margin: 20px 41px 0 41px;
    height: 44px;
    font-size: 14px;
  }
  .z-btn {
    margin: 30px 41px 0 41px;
    width: calc(100% - 82px);
    height: 44px;
    box-sizing: border-box;
    .bg-2();
  }
  .wx-btn{
    position: relative;
    margin: 23px 41px 0 41px;
    height: 44px;
    font-size: 16px;
    color: #fff;
    background:rgba(60,176,53,1);
    border-radius:5px;
    .wx-icon{
      margin-right: 4px;
      height: 27px;
      width: 27px;   
      background: url("../assets/imgs/wx-logo.png");
      background-size: 100% 100%;
    }
    .recommand{
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 23px;
      color: #fff;
      font-size: 11px;
      background: url("../assets/imgs/peroid.png");
      background-size: 100% 100%;
    }
  }
  .bg-gray {
    background: #909097;
  }
  .other {
    margin: 20px 41px;
  }
  // .wx-icon {
  //   margin: 40px auto 0 auto;
  //   width: 50px;
  //   height: 50px;
  //   background: url("../assets/imgs/weixin.png");
  //   background-size: 100% 100%;
  // }
  .rule {
    margin-top: 15px;
    .f-13 {
      color: #666;
      font-size: 13px;
    }
    .rule-content {
      color: #0a81ad;
    }
  }
}
</style>